<template>
  <van-swipe
    class="my-swipet"
    :autoplay="3000"
    indicator-color="#b550ff"
    @change="onChange"
  >
    <van-swipe-item
      :class="i == index ? 'van-swipe-item-activate' : ''"
      v-for="(item, i) in arr " :key="i" 
    >
   <a :href="item.link">  <img :src="item.url" alt=""></a>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import {getextension}  from '@/api/home'
export default {
    data(){
        return {
            index:0,
            arr:[]
        }
    },
  async  created(){
        let  {data}  =  await  getextension()
        this.arr = data
    },  
  methods: {
    onChange(index) {
      this.index = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.my-swipet {
  margin: 12px 0;
}
.van-swipe-item {
  height: 5rem;
  img {
    width: 11rem;
    height: 6rem;
    padding: 0 5px;
    border-radius: 8px;
  }
}
.my-swipe-grid {
      padding: 15px 0;
    }
::v-deep .van-swipe__track {
  display: flex;
  align-items: center;
}
::v-deep .van-tabs__wrap {
  border-bottom: 4px solid #f3f3f3;
}
.van-swipe-item-activate {
  height: 5.6rem !important;
}
::v-deep .van-swipe__indicator {
  width: 26px;
  height: 5px;
  border-radius: 8px;
}
</style>
